<template>
  <div class="practice">
    <main>
      <h1>练习页</h1>
      <p>---------------------------------</p>
      <button @click="fun()">点我 mixin混入的函数fun()</button>
      <p>-----------------------------------</p>
      <h1>局部过滤器filters-------神里劈观</h1>
      <h1>{{ text | marker }}</h1>
      <p>-----------------------------------</p>
      <button @click="getzi()">点我通过ref逆向拿子组件值</button>
      <h1>父组件的值----------{{ zhi }}</h1>
      <Zi ref="ziValue" />
      <p>-------------------------------------</p>
      <h1 v-red>directives自定义指令--字红色</h1>
      <p>---------------------------------------</p>
      <h1>$set</h1>
      <button @click="add()">点我添加数据</button>
      <h1>{{ set.name }}------------{{ set.age }}</h1>
      <p>--------------------------------------</p>
      <h1>中央事件总线eventBus</h1>
      <Zi2 />
      <Zi3 />
      <p>--------------------------------------</p>
      <h1>keep-alive</h1>
      <button @click="go('Zi4')">组件4</button>
      <button @click="go('Zi5')">组件5</button>
      <keep-alive include="Zi4">
        <component :is="id"></component>
      </keep-alive>
      <p>------------------------------------------</p>
    </main>
    <Nav />
  </div>
</template>

<script>
import Nav from '@/components/navBottom.vue'
import {demo1} from '@/mixin/practice.js'
import Zi from '@/components/practice/zi.vue'
import Zi2 from '@/components/practice/zi_2.vue'
import Zi3 from '@/components/practice/zi_3.vue'
import Zi4 from '@/components/practice/zi_4.vue'
import Zi5 from '@/components/practice/zi_5.vue'
export default {
  mixins:[demo1],
  components:{
    Nav,
    Zi,
    Zi2,
    Zi3,
    Zi4,
    Zi5
  },
  beforeRouteLeave (to, from, next) {
    console.log(to);
    console.log(from);
    alert('组件内守卫beforeRouteLeave已生效');
    if(confirm('是否离开？')){
      next();
    }
    else{
      next(false);
    }
  },
  filters:{
    marker(data){
      if(data.length > 13){
        return data.substr(0,12) +'...'
      }
    }
  },
  directives:{
    red:{
      inserted(e){
        e.style.color = 'red';
      }
    }
  },

}
</script>

<style scoped>
.practice main {
  padding: 0.15rem;
}
</style>